<template>
  <div id="tag" class="container">
    <el-tabs v-model="params.lang" class="tab-card tabs-white" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in langList" :key="item.id" :label="item.lang" :name="item.lang"></el-tab-pane>
    </el-tabs>
    <div class="content">
      <el-button type="primary" icon="el-icon-plus" @click="goAdd">
        {{ $t('添加标签') }}
      </el-button>
      <BaseTable :request="request" :params.sync="params" :is-request="false" ref="baseTable">
        <el-table-column prop="id" label="ID" width="80px" />
        <el-table-column prop="title" :label="$t('标签名称')" />
        <el-table-column prop="tag_hit" :label="$t('标签点击数')" width="90px" />
        <el-table-column prop="article_count" :label="$t('标签文章数')" />
        <el-table-column prop="is_recommend" :label="$t('是否推荐')" width="300px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_recommend" :active-value="1" :inactive-value="2" :active-text="$t('推荐')"
              :inactive-text="$t('不推荐')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.1)"
              @change="changeRecommend(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('状态')" width="200px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
              :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.1)"
              @change="changeStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('seo标题')" prop="seo_title" />
        <el-table-column :label="$t('seo关键词')" prop="seo_keywords" show-overflow-tooltip />
        <el-table-column :label="$t('seo描述')" prop="seo_description" show-overflow-tooltip />
        <el-table-column :label="$t('操作')" fixed="right" width="150px" align="right">
          <template slot-scope="scope">
            <EditBtn @click="edit(scope.row)" />
            <DelBtn @success="dele(scope.row)" :confirm-content="$t('删除该标签')" />
          </template>
        </el-table-column>
      </BaseTable>
      <BaseDialog :title="addForm.id ? this.$t('编辑') : this.$t('添加')" :dialog-show.sync="dialogShow" width="50%" footer
        @submit="submit">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-position="top">
          <el-form-item :label="`${$t('标签名称')}:`" prop="title">
            <el-input v-model="addForm.title" />
          </el-form-item>
          <el-form-item :label="`${$t('标签文章数')}:`" prop="article_count">
            <el-input v-model="addForm.article_count" />
          </el-form-item>
          <el-form-item :label="`${$t('标签点击数')}:`" prop="tag_hit">
            <el-input v-model="addForm.tag_hit" />
          </el-form-item>
          <el-form-item label="Title:" prop="seo_title">
            <el-input v-model="addForm.seo_title" />
          </el-form-item>
          <el-form-item label="Keyword:" prop="seo_keywords">
            <el-input v-model="addForm.seo_keywords" />
          </el-form-item>
          <el-form-item label="Description:" prop="seo_description">
            <el-input v-model="addForm.seo_description" type="textarea" />
          </el-form-item>
          <el-form-item :label="`${$t('状态')}:`">
            <el-switch v-model="addForm.status" :active-text="$t('正常')" :inactive-text="$t('隐藏')" :active-value="1"
              :inactive-value="2" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)" />
          </el-form-item>
          <el-form-item :label="`${$t('是否推荐')}:`">
            <el-switch v-model="addForm.is_recommend" :active-text="$t('推荐')" :inactive-text="$t('不推荐')" :active-value="1"
              :inactive-value="2" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)" />
          </el-form-item>
        </el-form>
      </BaseDialog>
    </div>
  </div>
</template>
<script>
import tagApi from '@/api/tag.js'
import websetApi from '@/api/websetting'
export default {
  data() {
    return {
      request: tagApi.tagList,
      params: {
        lang: '',
        website_id: ''
      },
      tagData: [],
      langList: [],
      dialogShow: false,
      addForm: {
        id: '',
        title: '',
        article_count: '',
        is_recommend: '',
        tag_hit: '',
        status: '',
        seo_keywords: '',
        seo_title: '',
        seo_description: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t('请输入标签名称'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1: {
      handler(val) {
        if (val) {
          this.siteId = val
          this.params.website_id = val
          this.getLang()
        }
      },
      immediate: true
    }
  },

  methods: {
    changeRecommend(row) {
      this.addForm = {
        id: row.id,
        title: row.title,
        article_count: row.article_count,
        is_recommend: row.is_recommend,
        tag_hit: row.tag_hit,
        status: row.status,
        seo_keywords: row.seo_keywords,
        seo_title: row.seo_title,
        seo_description: row.seo_description,
        website_id: this.siteId,
        lang: this.params.lang
      }
      tagApi.tagUpdate({ ...this.addForm }).then(res => {
        if (res.code == 0) {
          this.dialogShow = false
          this.$message.success(res.msg)
          this.$refs.baseTable.getList()
        }
      })
    },
    changeStatus(row) {
      this.addForm = {
        id: row.id,
        title: row.title,
        article_count: row.article_count,
        is_recommend: row.is_recommend,
        tag_hit: row.tag_hit,
        status: row.status,
        seo_keywords: row.seo_keywords,
        seo_title: row.seo_title,
        seo_description: row.seo_description,
        website_id: this.siteId,
        lang: this.params.lang
      }
      tagApi.tagUpdate({ ...this.addForm }).then(res => {
        if (res.code == 0) {
          this.dialogShow = false
          this.$message.success(res.msg)
          this.$refs.baseTable.getList()
        }
      })
    },
    // 切换tab
    handleClick(val) {
      this.params.lang = val.name
      this.$refs.baseTable.getList('search')
    },
    // 获取站点语言
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.params.lang = res.data[0].lang
          this.$refs.baseTable.getList('search')
        }
      })
    },
    // 新增
    goAdd() {
      this.addForm.id = ''
      this.addForm = {
        title: '',
        article_count: '',
        is_recommend: 2,
        tag_hit: '',
        status: 1,
        seo_keywords: '',
        seo_title: '',
        seo_description: '',
        website_id: this.siteId,
        lang: this.params.lang
      }
      this.dialogShow = true
    },
    // 编辑
    edit(row) {
      this.addForm = {
        id: row.id,
        title: row.title,
        article_count: row.article_count,
        is_recommend: row.is_recommend,
        tag_hit: row.tag_hit,
        status: row.status,
        seo_keywords: row.seo_keywords,
        seo_title: row.seo_title,
        seo_description: row.seo_description,
        website_id: this.siteId,
        lang: this.params.lang
      }
      this.dialogShow = true
    },
    // 保存添加编辑
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            tagApi.tagSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.$refs.baseTable.getList('search')
              }
            })
          } else {
            tagApi.tagUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.$refs.baseTable.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除
    dele(row) {
      tagApi.tagDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList('search')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .tab-card.el-tabs--card .el-tabs__content {
    padding: 0 16px;
  }
}

.custom-table-container {
  margin-top: 24px;
}

.content {
  background-color: #fff;
  padding: 24px 16px 24px;
}
</style>
